<script setup>
import { huanBaoAPI } from "@/api/shopInspection/report.js";
const { proxy } = getCurrentInstance();

// 列表数据
const tableData = ref([]);

// 按钮
const buttonList = ref([
  { type: "export", hasPermi: "finance:dataChange:export" },
]);

const list = ref([
  {
    label: "待处理",
    value: 0,
  },

  {
    label: "已处理",
    value: 1,
  },
  {
    label: "已发起",
    value: 2,
  },
  {
    label: "暂停",
    value: 3,
  },
  {
    label: "抄送",
    value: 4,
  },
]);
// 列表枚举
const column = ref([
  { label: "任务单号", prop: "taskNo", width: "100" },
  { label: "状态", prop: "status" },
  { label: "日期", prop: "selfExaminationTime" },
  { label: "部门", prop: "deptName" },
  { label: "位置", prop: "location", width: "180" },
  { label: "整改情况", prop: "rectificationSituation" },
  { label: "暂停原因", prop: "pauseReason" },
]);

// 状态
const state = reactive({
  treeLoading: false,
  loading: false, // 列表加载状态
  btnLoading: false, // 按钮加载状态
  isShow: false, // 弹窗状态
  title: "新增", // 弹窗标题
  total: 0, // 列表总量
});

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
});

// 查询条件 枚举
const selectList = ref([
  { type: "日期范围" },
  {
    label: "部门",
    model: "deptId",
    type: "部门",
  },

  {
    label: "状态",
    model: "status",
    type: "下拉单选",
    opt: list,
  },
]);

// 导出
const exportFun = () => {};

// 查询条件
const selectSubmit = (val) => {
  Object.keys(val).forEach((keyItem) => (query[keyItem] = val[keyItem]));
  getList();
};

// 获取列表
const getList = async () => {
  state.loading = true;
  try {
    const { data: result } = await huanBaoAPI(query);
    tableData.value = result.result;

    state.total = result.total;
  } catch {
  } finally {
    state.loading = false;
  }
};
getList();
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" />
    <el-card>
      <!-- 按钮组件 -->
      <p-button :list="buttonList" @add="addDic" />
      <!-- 表格数据 -->
      <p-table
        class="tableClass"
        :isSel="false"
        :loading="state.loading"
        :data="tableData"
        :column="column"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="state.total"
        @change="handleSelectionChange"
        @pagination="getList"
      >
        <template #columnCell="{ column, record }">
          <p-dictTag
            v-if="column.label == '单据状态'"
            :options="statistics_procure_order_track_state"
            :value="record.status"
          />
          <!-- 辅助属性 -->
          <p-producer
            :data="record.auxiliaryAttribute"
            v-if="column.label == '辅助属性'"
          />
          <div v-if="column.label == '付款率'">{{ record.ratePayment }}%</div>
        </template>
      </p-table>
    </el-card>
  </div>
</template>
<style scoped lang="scss"></style>